<template>
  <el-card class="box-card">
    <div class="contain">
      <h1>报名信息</h1>
      <el-row>
        <!-- 根据姓名查询 -->
        <el-input
          placeholder="输入姓名查询"
          v-model="searchmsg"
          class="searchinput"
        >
          <el-button
            type="primary"
            plain
            slot="append"
            icon="el-icon-search"
            @click="search()"
          ></el-button>
        </el-input>
        <el-button
          @click="addFormVisible = true"
          type="primary"
          style="float: right; margin-top: 30px; margin-right: 50px"
          >+添加</el-button
        >
      </el-row>

      <el-table
        :data="
          tableData.slice((currentPage - 1) * PageSize, currentPage * PageSize)
        "
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column label="姓名" prop="username"> </el-table-column>
        <el-table-column label="专业" prop="major"> </el-table-column>
        <el-table-column label="班级" prop="class"> </el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="学号" prop="product1_account">
        </el-table-column>
        <el-table-column label="状态" prop="status"> </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="warning"
              @click="Alter(scope.row), (dialogFormVisible = true)"
              >修改
            </el-button>
            <el-button type="danger" plain @click="Alter(scope.row),delect()"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加弹窗 -->
      <el-dialog :visible.sync="addFormVisible" overflow="auto">
        <el-form style="width: 100%" ref="addform">
          <h1>添加信息</h1>
          <el-form-item label="姓名"
            ><el-input v-model="addform.username"></el-input>
          </el-form-item>
          <el-form-item label="专业"
            ><el-input v-model="addform.major"></el-input>
          </el-form-item>
          <el-form-item label="班级"
            ><el-input v-model="addform.class"></el-input>
          </el-form-item>
          <el-form-item label="邮箱"
            ><el-input v-model="addform.email"></el-input
          ></el-form-item>
          <el-form-item label="学号"
            ><el-input v-model="addform.account"></el-input>
          </el-form-item>
          <el-form-item label="密码"
            ><el-input v-model="addform.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="add()">添加</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 修改弹窗 -->
      <el-dialog :visible.sync="dialogFormVisible" overflow="auto">
        <el-form style="width: 100%" ref="changeform">
          <h1>修改信息</h1>
          <el-form-item label="姓名"
            ><el-input v-model="changeform.username"></el-input>
          </el-form-item>
          <el-form-item label="专业"
            ><el-input v-model="changeform.major"></el-input>
          </el-form-item>
          <el-form-item label="班级"
            ><el-input v-model="changeform.class"></el-input>
          </el-form-item>
          <el-form-item label="邮箱"
            ><el-input v-model="changeform.email"></el-input
          ></el-form-item>
          <el-form-item label="学号"
            ><el-input v-model="changeform.account"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button @click="change()">修改</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          small
          :pager-count="7"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="PageSize"
          layout="total, prev, pager, next"
          :total="totalCount"
        >
        </el-pagination>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          username: "",
          major: "",
          class: "",
          email: "",
          product1_account: "",
          status: "",
        },
      ],
      changeform: {
        username: "",
        major: "",
        class: "",
        email: "",
        account: "",
      },
      addform: {
        username: "",
        major: "",
        class: "",
        email: "",
        account: "",
        password: "",
      },
      searchmsg: "",
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 1,
      // 个数选择器（可修改）
      pageSizes: 6,
      // 默认每页显示的条数（可修改）
      PageSize: 5,
      // 弹窗
      dialogFormVisible: false,
      addFormVisible: false,
    };
  },
  created() {
    this.getmessage();
  },
  methods: {
    async getmessage() {
      const token = localStorage.getItem("token"); //token
      const { data: res } = await this.$http.post(
        `http://second.xxr120.xyz/api/product2/showAll`,
        {
          token: token,
        }
      );
      this.totalCount = res.data.length;
      for (let i = 0; i < res.data.length; i++) {
        if (res.data[i].status == 0) {
          res.data[i].status = "未报名";
        } else {
          res.data[i].status = "已报名";
        }
      }
      this.tableData = res.data;
    },
    async search() {
      let token = localStorage.getItem("token");
      const { data: res } = await this.$http.post(
        `http://second.xxr120.xyz/api/product2/select?token=` + token,
        {
          username: this.searchmsg,
        }
      );
      if (res.code == 200 && res.data.length != 0) {
        this.totalCount = res.data.length;
        this.tableData = res.data;
        for (let i = 0; i < res.data.length; i++) {
        if (res.data[i].status == 0) {
          res.data[i].status = "未报名";
        } else {
          res.data[i].status = "已报名";
        }
      }
        this.$message.success("查询成功！");
        //  this.getmessage();
      } else {
        this.$message.error("查询失败！");
        this.getmessage();
      }
    },
    async add() {
      let token = localStorage.getItem("token");
      if (
        !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(
          this.addform.email
        )
      ) {
        // 合法邮箱
        this.$message.error("请输入正确邮箱！");
        return false;
      }
      if( this.addform.account==''||this.addform.username==''||this.addform.email==''||this.addform.major==''||this.addform.class==''||this.addform.password==''){
        this.$message.error("请输入填写完整！");
      }
      const { data: res } = await this.$http.post(
        `http://second.xxr120.xyz/api/product2/insertUser?token=` + token,
        {
          account: this.addform.account,
          username: this.addform.username,
          email: this.addform.email,
          major: this.addform.major,
          class: this.addform.class,
          password: this.addform.password,
        }
      );
      if (res.code == 200) {
        this.$message.success("添加成功！");
        this.addform = {
        username: "",
        major: "",
        class: "",
        email: "",
        account: "",
        password: "",
      }
        this.addFormVisible = false;
        this.getmessage();
      }else{
        this.$message.error("添加失败！");
      }

    },
    // 插槽
    async Alter(item) {
      localStorage.setItem("lusername", item.username);
      localStorage.setItem("lmajor", item.major);
      localStorage.setItem("lclass", item.class);
      localStorage.setItem("lemail", item.email);
      localStorage.setItem("stuaccount", item.account);
    },
    beforechange() {
      this.changeform.email = localStorage.getItem("lemail");
      this.changeform.class = localStorage.getItem("lclass");
      this.changeform.major = localStorage.getItem("lmajor");
      this.changeform.username = localStorage.getItem("lusername");
      this.changeform.account = localStorage.getItem("stuaccount");
      // this.beforechange();
    },
    async change() {
      let token = localStorage.getItem("token");
      this.changeform.account=localStorage.getItem("stuaccount");
      if (
        !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(
          this.changeform.email
        )
      ) {
        // 合法邮箱
        this.$message.error("请输入正确邮箱！");
        return false;
      }
       if( this.changeform.account==''||this.changeform.username==''||this.changeform.email==''||this.changeform.major==''||this.changeform.class==''){
        this.$message.error("请输入填写完整！");
      }
      const { data: res } = await this.$http.post(
        `http://second.xxr120.xyz/api/product2/modify?token=` + token,
        {
          account: localStorage.getItem("stuaccount"),
          username: this.changeform.username,
          email: this.changeform.email,
          major: this.changeform.major,
          class: this.changeform.class,
        }
      );
      if (res.code == 200) {
        this.$message.success("修改成功！");
        this.dialogFormVisible = false;
        this.changeform = {
        username: "",
        major: "",
        class: "",
        email: "",
        account: "",
      };
      }

      this.getmessage();
    },
    async delect() {
      let token = localStorage.getItem("token");
      let account = localStorage.getItem("stuaccount");
      const { data: res } = await this.$http.post(
        `http://second.xxr120.xyz/api/product2/deleteUser`,
        {
          token: token,
          account: account,
        }
      );
      if (res.code == 200) {
        this.$message.success("删除成功！");
        this.getmessage();
      } else {
        this.$message.error("删除失败！");
      }
    },
    // 分页
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val;
      // 在改变每页显示的条数时，将页码显示到第一页
      this.currentPage = 1;
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val;
    },
  },
};
</script>
<style scoped>
.contain {
  text-align: center;
}
.contain img {
  margin-top: 3%;
  width: 50%;
}
.jieshao {
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  padding: 5% 0;
  background-color: rgb(225, 225, 225);
}
.btn {
  margin-top: 50px;
  background-color: rgb(225, 225, 225);
  padding: 5% 0;
}
.searchinput {
  margin-top: 30px;
  width: 40vw;
  float: left;
}
</style>
